<template>
  <div class="page-dialog-box" v-if="pageDialog">
    <div :class="{ 'page-dialog': true, 'page-dialog-show': isShowAnimation, 'page-dialog-hidden': !isShowAnimation }">
      <div class="page-dialog-inner">
        <slot></slot>
        <!-- <div class="bottom-btns">
          <slot name="other-btns" ></slot>
        </div> -->
      </div>
    </div>
  </div>

</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
const props = defineProps({
  show: Boolean
})
const isShowAnimation = ref(false)
const emit = defineEmits(['update:show'])
const pageDialog = computed({
  get: () => props.show,
  set: val => emit('update:show', val)
})
watch(
  () => props.show,
  (newValue, oldValue) => {
    console.log(newValue);
    if (newValue) {
      setTimeout(() => {
        isShowAnimation.value = true
      }, 10);
    } else {
      isShowAnimation.value = false
    }
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.bottom-btns {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #dcdfe6;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}

.page-dialog {
  transition: 500ms;
}

.page-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%
}

.page-dialog-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #f0f2f5;
}

.page-dialog-show {
  opacity: 1;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

.page-dialog-hidden {
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #ffffff2e;
  position: absolute;
  left: 200px;
  top: 0;
}
</style>
